<style lang="less" scoped>
.page-notice .census-main {
    margin-left: 0;
    padding: 20px;
}
</style>
<template>
    <div class="page-census page-notice">
        <div class="crumbs">
            <router-link to="/">首页</router-link> / <span class="active">通知公告</span>
        </div>
        <el-container :style="{ height: mainH + 'px' }">
            <el-main class="census-main">
                <div class="opers flex v-c">
                    <el-form :inline="true" class="filter-blk flex-1">
                        <el-form-item label="时间">
                            <el-date-picker
                                v-model="dateRange"
                                type="daterange"
                                align="right"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd"
                                :picker-options="pickerOptions"
                            >
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item class="ml-20" label="分类">
                            <el-select v-model="filterForm.announcementType" placeholder="请选择">
                                <el-option
                                    :label="item.name"
                                    :value="item.id"
                                    v-for="(item, index) in typeList"
                                    :key="index"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="ml-20" label="状态">
                            <el-select v-model="filterForm.state" placeholder="请选择">
                                <el-option
                                    :label="item.name"
                                    :value="item.id"
                                    v-for="(item, index) in statusList"
                                    :key="index"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="searchAction"
                                ><i class="iconfont icon-search"></i> 搜索</el-button
                            >
                            <el-button type="primary" @click="resetAction"
                                ><i class="iconfont icon-refresh"></i> 重置</el-button
                            >
                        </el-form-item>
                    </el-form>
                    <div v-if="hasPermission('001001')">
                        <el-button
                            type="blue"
                            @click="newAction"
                            :disabled="!$store.getters.hasEditPermission"
                            ><i class="iconfont icon-add"></i> 新增通知公告</el-button
                        >
                    </div>
                </div>
                <el-table :data="dataList" style="width: 100%" v-loading="loading">
                    <el-table-column
                        type="index"
                        label="序号"
                        width="90"
                        :index="indexMethod"
                    ></el-table-column>
                    <el-table-column prop="stateName" label="状态" width="120">
                        <template slot-scope="scope">
                            <i class="dot" :class="{ red: scope.row.state == 0 }"></i>
                            {{ scope.row.stateName }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="announcementTypeName"
                        label="分类"
                        width="120"
                    ></el-table-column>
                    <el-table-column
                        prop="createtime"
                        label="创建时间"
                        width="200"
                    ></el-table-column>
                    <el-table-column
                        prop="publishtime"
                        label="发布时间"
                        width="200"
                    ></el-table-column>
                    <el-table-column prop="contentDes" label="内容"></el-table-column>
                    <el-table-column label="操作" width="220">
                        <template slot-scope="scope">
                            <!-- <div class="nowrap" v-if="scope.row.state == 0"> -->
                                <el-button
                                    type="primary"
                                    @click="editAction(scope.row)"
                                    v-if="hasPermission('001001')&&scope.row.state == 0"
                                    :disabled="!$store.getters.hasEditPermission"
                                    >编辑</el-button
                                >
                            <!-- </div> -->
                            <el-button
                                type="primary"
                                @click="detailAction(scope.row, scope.$index)"
                                v-else
                                >查看详情</el-button
                            >
                            <el-button
                                type="red"
                                @click="deleteAction(scope.row, scope.$index)"
                                v-if="hasPermission('001002')"
                                :disabled="!$store.getters.hasEditPermission"
                                >删除</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    v-if="total > 0"
                    class="text-right mt-20 mr-20"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    layout="prev, pager, next, total, jumper"
                    :total="total"
                >
                </el-pagination>
            </el-main>
        </el-container>
        <!-- 添加/编辑 start -->
        <el-dialog
            v-if="newModalVisible"
            :title="newModalTitle"
            :visible.sync="newModalVisible"
            width="660px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            destroy-on-close
        >
            <New
                ref="newData"
                :activeData="activeData"
                :typeList="typeList"
                @success="submitSuccessAction"
                @fail="adding = false"
                @submitting="adding = true"
                @cancel="newModalVisible = false"
            >
            </New>
            <div slot="footer">
                <el-button type="cancel" @click="newModalVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    :loading="adding"
                    @click="submitAction"
                    :disabled="!$store.getters.hasEditPermission"
                    >确定</el-button
                >
            </div>
        </el-dialog>
        <!-- 添加/编辑 end -->
        <!-- 详情 start -->
        <el-dialog
            v-if="detailModalVisible"
            title="通知公告详情"
            :visible.sync="detailModalVisible"
            width="660px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            destroy-on-close
        >
            <Detail ref="detail" :activeData="activeData"> </Detail>
        </el-dialog>
        <!-- 详情 end -->
    </div>
</template>
<script>
import New from "@/components/census/notice/New.vue"
import Detail from "@/components/census/notice/Detail.vue"
import { mapState } from "vuex"
export default {
    name: "Notice",
    props: {
        winH: {
            type: Number,
            default: 500,
        },
    },
    components: {
        New,
        Detail,
    },
    data() {
        return {
            dateRange: [],
            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                            picker.$emit("pick", [start, end])
                        },
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                            picker.$emit("pick", [start, end])
                        },
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                            picker.$emit("pick", [start, end])
                        },
                    },
                ],
            },
            filterForm: {
                announcementType: null,
                state: null,
            },
            total: 0,
            currentPage: 1,
            pageSize: 10,
            loading: false,
            dataList: [],
            typeList: [],
            statusList: [
                {
                    id: null,
                    name: "全部",
                },
                {
                    id: "0",
                    name: "草稿",
                },
                {
                    id: "1",
                    name: "已发布",
                },
            ],
            activeData: null,
            newModalTitle: "新建通知",
            newModalVisible: false,
            adding: false,
            detailModalVisible: false,
        }
    },
    watch: {
        dateRange(val) {
            this.filterForm.starttime = val[0]
            this.filterForm.endtime = val[1]
        },
    },
    computed: {
        mainH() {
            return this.winH - 200
        },
        ...mapState(["siteInfos"]),
    },
    methods: {
        getData(page) {
            this.loading = true
            let params = Object.assign(
                {
                    page: page,
                    limit: this.pageSize,
                    area: this.area,
                },
                this.filterForm
            )
            this.$get(
                "/noticeAnnouncement/noticeAnnouncement/listNoticeAnnouncementListPage",
                params
            ).then(
                (res) => {
                    this.loading = false
                    let data = res.data
                    this.currentPage = page
                    this.total = data.totalSize
                    this.dataList = data.Items
                },
                (err) => {
                    this.loading = false
                    if (err.msg) {
                        this.$message.error(err.msg)
                    }
                }
            )
        },
        handleCurrentChange(page) {
            this.getData(page)
        },
        getType() {
            this.$get("/noticeAnnouncement/noticeAnnouncement/dictList", {
                groupname: "通告类型",
            }).then(
                (res) => {
                    this.typeList = res.data
                    this.typeList = [...[{ id: null, name: "全部" }], ...this.typeList]
                },
                (err) => {
                    if (err.msg) {
                        this.$message.error(err.msg)
                    }
                }
            )
        },
        indexMethod(index) {
            return (this.currentPage - 1) * this.pageSize + index + 1
        },
        searchAction() {
            this.getData(1)
        },
        resetAction() {
            this.filterForm = {}
        },
        getDataById(id, cbk) {
            this.$get("/noticeAnnouncement/noticeAnnouncement/getById", {
                id: id,
            }).then(
                (res) => {
                    let thisData = res.data
                    cbk && cbk(thisData)
                },
                (err) => {
                    //
                }
            )
        },
        newAction() {
            this.newModalTitle = "新增通知公告"
            this.newModalVisible = true
            this.activeData = null
        },
        editAction(item) {
            this.getDataById(item.id, (data) => {
                this.activeData = data
                this.newModalTitle = "编辑通知公告"
                this.newModalVisible = true
            })
        },
        submitAction() {
            this.$refs.newData.submitAction()
        },
        // 新增/编辑成功
        submitSuccessAction(data) {
            this.adding = false
            this.newModalVisible = false
            this.getData(this.currentPage)
        },
        deleteAction(item, index) {
            this.showConfirm("确定删除该通知？", () => {
                this.deleting = true
                this.$post("/noticeAnnouncement/noticeAnnouncement/delete", {
                    id: item.id,
                }).then(
                    (res) => {
                        this.deleting = false
                        this.$message.success("删除成功")
                        this.dataList.splice(index, 1)
                        // this.getData(this.currentPage)
                    },
                    (err) => {
                        this.deleting = false
                        this.$message.error(err.msg)
                    }
                )
            })
        },
        detailAction(item, index) {
            this.getDataById(item.id, (data) => {
                this.activeData = data
                this.detailModalVisible = true
            })
        },
    },
    created() {
        this.getData(1)
        this.getType()
    },
    activated() {},
    mounted() {},
}
</script>
